<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="注册时间">
        <el-date-picker
            v-model="formInline.date1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间">
        </el-date-picker>
        -
        <el-date-picker
            v-model="formInline.date2"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-radio-group v-model="formInline.carStatus">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">审核不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input style="width: 300px" v-model="formInline.name" placeholder="请输入用户名、用户手机号、车牌号查询"
                  clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage1">重置</el-button>
        <el-button type="primary" @click="findPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          fixed
          prop="vehicleType"
          label="车辆类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.vehicleType == 1" type="success">经济型</el-tag>
          <el-tag v-if="scope.row.vehicleType == 2" type="info">舒适型</el-tag>
          <el-tag v-if="scope.row.vehicleType == 3" type="warning">豪华型</el-tag>
          <el-tag v-if="scope.row.vehicleType == 4" type="danger">货运</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed
          width="100px"
          prop="licencePlate"
          label="车牌号">
      </el-table-column>
      <el-table-column
          prop="vehicleModel"
          label="车型">
      </el-table-column>
      <el-table-column
          prop="energyType"
          label="能源类型">
      </el-table-column>
      <el-table-column
          prop="brand"
          label="品牌">
      </el-table-column>
      <el-table-column
          prop="vender"
          label="厂家">
      </el-table-column>
      <el-table-column
          prop="vehicleAge"
          label="车龄">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="vin"
          label="车辆VIN号">
      </el-table-column>
      <el-table-column
          prop="deviceNumber"
          label="发动机号/电动机号">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="司机姓名">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="userPhone"
          label="司机手机号">
      </el-table-column>
      <el-table-column
          prop="registeredCity"
          label="司机注册时所在城市">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="registrationTime"
          label="注册时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="submissionTime"
          label="提交审核时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="approvalTime"
          label="审核通过时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="carStatus"
          label="审核状态">
        <template slot-scope="scope">
          {{
            scope.row.carStatus == 1 ? '审核通过' : scope.row.carStatus == 2 ? '审核不通过' : '待审核'
          }}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="verifier"
          label="审核人">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="xq(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
        title="司机及车辆详情"
        :visible.sync="dialogVisible"
        width="80%">
      <h3>司机信息</h3>
      <img :src="driver.userPhoto" style="width: 100px;height: 100px; float: left;">
      <h4>{{ car.userName }}</h4>
      性别：{{ car.userSex == 1 ? '男' : car.userSex == 2 ? '女' : '未知' }} &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      生日：{{ car.userBirthday }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      年龄：{{ car.userAge }}<br>
      手机号：{{ car.userPhone }}&emsp;&emsp;&emsp;
      邮箱：{{ car.userEmail }}&emsp;&emsp;&emsp;
      驾照有效期：{{ car.drivingLicense }} <br>
      城市：{{ car.registeredCity }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      行政区：{{ car.administrativeRegion }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      注册时间：{{ car.dregistrationTime }} <br>
      <el-divider></el-divider>
      <h3>车辆信息</h3>
      <img :src="car.carPhoto" style="width: 100px;height: 100px; float: left;"></img>
      车辆类型：{{ car.carType == 1 ? '经济型' : car.carType == 2 ? '舒适型' : car.carType == 3 ? '豪华型' : '货运' }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      车牌号：{{ car.licencePlate }}<br>
      车辆型号：{{ car.vehicleModel }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      车辆品牌：{{ car.brand }}<br>
      厂家：{{ car.vender }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      能源类型：{{ car.energyType }} <br>
      发动机号/电动机号：{{ car.deviceNumber }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      车辆VIN码：{{ car.vin }} <br>
      车龄：{{ car.vehicleAge }}
      <el-divider></el-divider>
      <h3>审核信息</h3>
      司机提交审核时间：{{ car.submissionTime }}&emsp;&emsp;&emsp;&emsp;
      司机的审核状态：{{
        car.carStatus == 1 ? '审核通过' : car.carStatus == 2 ? '审核不通过' : '待审核'
      }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <el-button v-if="car.carStatus == 0" type="primary" @click="aa(car.id)">
        审核
      </el-button>
      <br>
      司机的审核通过时间：{{ car.approvalTime }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      审核人：{{ car.verifier }}
    </el-dialog>
    <el-dialog
        :visible.sync="dialogVisible1"
        width="30%">
      &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <el-button @click="updateVerificationStatus(2)">拒绝</el-button>
      <el-button type="primary" @click="updateVerificationStatus(1)">同意</el-button>

    </el-dialog>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      dialogVisible1: false,
      dialogVisible: false,
      car: {},
      driver: {},
      formInline: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      id: null,
      tableData: []
    }
  },
  methods: {
    aa(id) {
      this.dialogVisible1 = true;
      this.id = id
    },
    updateVerificationStatus(status) {
      axios.get(`http://localhost:9999/api-function/car/updateVerificationStatus?id=${this.id}&status=${status}`).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogVisible1 = false;
          this.findPage();
          this.xq(this.car);
        } else {
          this.$message({
            message: '操作失败',
            type: 'error'
          });
        }
      })
    },
    xq(row) {
      this.car = {};
      this.dialogVisible = true;
      axios.get(`http://localhost:9999/api-function/car/findCarById?id=${row.id}`).then(res => {
        this.car = res.data.data;
        console.log(this.car);
      })
    },
    findPage1() {
      this.formInline = {};
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
    findPage() {
      axios.post(`http://localhost:9999/api-function/car/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        console.log(this.tableData);
      })
    }
  },
  created() {
    this.findPage();
  }
}
</script>
<style scoped>

</style>
